<template>
  <DialogComp @maskClick="$emit('maskClick')" title="收藏夹信息">
    <template>
      <div class="edit-container p-r">
        <div class="edit-cover">
          <p>收藏夹封面</p>
          <img
            @click="handleUpload"
            :src="uploadSrc ? uploadSrc : src"
            alt=""
          />
          <input
            type="file"
            id="cover-upload-btn"
            @change="uploadFavoriteCover"
            ref="uploadRef"
            name="avatar"
            class="upload-cover-img"
          />
        </div>

        <div class="select-container">
          <SelectComp @click="isPublic = !$event" :selected="isPublic" style="width:14px;height:14px;vertical-align:-2px" />
          公开歌曲收藏夹
        </div>

        
        <div class="edit-input-wrapper">
          <p>收藏夹名称</p>
          <el-input
            v-model="newTitle"
            maxlength="10"
            show-word-limit
            placeholder="请输入收藏夹名称"
          ></el-input>
        </div>
      </div>
    </template>
    <template #footer>
      <el-button :loading="confirmLoading" class="favorite-btn" @click="confirm"
        >提交</el-button
      >
      <el-button
        class="favorite-btn"
        @click="
          uploadSrc = src;
          newTitle = favoriteTitle;
          isPublic = Boolean(favoriteItem.isPublic);
        "
        >恢复</el-button
      >
    </template>
  </DialogComp>
</template>

<script>
import DialogComp from "@/components/DialogComp";
import SelectComp from "@/components/SelectComp";
import { upload } from "@/utils/favorite";
const base64 =
  "";
export default {
  components: {
    DialogComp,
    SelectComp
  },
  props: {
    confirmLoading: Boolean,
    favoriteItem: Object,
  },
  data() {
    return {
      uploadSrc: "",
      newTitle: "",
      isPublic : true,
    };
  },
  computed: {
    src() {
      return this.favoriteItem.coverUrl ? this.favoriteItem.coverUrl : base64;
    },
    favoriteTitle() {
      return this.favoriteItem.name ? this.favoriteItem.name : "";
    }
  },
  methods: {
    confirm() {
      this.$emit("confirm", {
        uploadSrc: this.uploadSrc ? this.uploadSrc : this.src, // 兼容如果未上传就用原来的封面
        newTitle: this.newTitle, 
        favoriteId: +this.favoriteItem.id,
        isPublic : this.isPublic
      }); // 确定
    },
    handleClick(item, i) {
      this.$emit("select", item, i);
    },
    handleUpload() {
      // 打开选择文件
      this.$refs.uploadRef.value = null; // 清空上传的数据
      this.$refs.uploadRef.click(); // 选择文件上传
    },
    uploadFavoriteCover() {
      // 当上传的图发生改变时触发上传
      upload(
        this.$refs.uploadRef.files,
        "picture",
        "/api/upload/favorite"
      ).then((res) => {
        if (res.code === 200) {
          // 上传成功
          const url = res.data; // 拿到上传的图片地址
          this.uploadSrc = url; // 更新图片
        } else {
          this.$message({
            type: "warning",
            messsage: "咦，好像有点小错误！",
          });
        }
      });
    },
  },
  watch: {
    favoriteTitle(val) {
      this.newTitle = val;
    },
    favoriteItem(val) {
      this.isPublic = Boolean(val.isPublic); // 恢复收藏夹
    }

  },
};
</script>

<style lang="less" scoped>
.select-container {
  font-size:12px;
  position: absolute;
  right : 0;
  top : 0;
  
}
p {
  margin: 0;
}
.edit-container {
  color: #222;
  line-height: 45px;
  .edit-cover {
    padding-bottom: 5px;
    img {
      display: block;
      width: 228px;
      height: 140px;
      border-radius: 2px;
      cursor: pointer;
    }
  }
}
.upload-cover-img {
  width: 0px;
  height: 0px;
  position: absolute;
  opacity: 0;
  outline: 0;
}
.favorite-btn {
  font-size: 14px;
  width: 100px;
  height: 40px;
  margin-top: 18px;
  background: #00a1d6;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  &:hover {
    background: #00b5e5;
  }
}
</style>